<template>
	<view class="container">
		<view class="title">
			近期热梗
		</view>
		<uni-card v-for="(item,index) in list" :key="item.id" class="uniCard">
			<view class="inCard">
				<text>
					{{ index+1 }}.{{ item.content }} 
				</text>
				<uni-icons @click="delItem(index)" class="iconBtn" type="closeempty" ></uni-icons>
			</view>
		</uni-card>
		<view class="count">
			<text>共{{list.length}}条梗</text>
		</view>
		<view class="bigView">
			<input type="text" name="" id="" placeholder="请输入热搜" v-model.trim="iptValue"  >
			<button class="btn" type="primary"  size="mini" :disabled="!iptValue.length" @click="toLaunch" >发布</button>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {  ref } from 'vue';
	const list = ref([])
	const iptValue = ref('')
	const toLaunch =()=>{
		const time = +new Date()
		if(iptValue.value == null || iptValue.value == ""){
			alert('不能为空')
		}else{
			list.value.push({id:time,content:iptValue.value})
		}
		console.log(time);
		iptValue.value = ''
	}
	// const delItem = (id)=>{
	// 	list.value = list.value.filter(item=>item.id !== id)
	// }
	const delItem = (index)=>{
		list.value.splice(index,1)
	}
	
	// const c = undefined
	const  d = ''
	// console.log(c.length);
	console.log(d.length);
	
	

	
</script>

<style scoped lang="scss">
	.title{
		text-align: center;
		font-size: 30px;
		height: 100px;
		line-height: 100px;
	}
	.uniCard{
		position: relative;
		view{
			font-size: 20px;
		}
		.iconBtn{
			position: absolute;
			right: 10px;
		}
	}
	.count{
		width: 100%;
		text-align: center;
		color: gray;
	}
	.bigView{
		padding: 0 10px;
		box-sizing: border-box;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		input{
			width: 70%;
			height: 40px;
			line-height: 40px;
			background-color: rgb(245,245,245);
			padding: 10px;
			box-sizing: border-box;
		}
		button{
			width: 29%;
			height: 40px;
			line-height: 40px;
			margin-left: 20px;
		}
	}
	
</style>
